<template>
    <div id="page-register" class="container">
        <div class="register-wrap">
            <div class="register-box">
                <div class="register-text">
                    注册
                </div>
                <div class="logo">
                    <img src="../assets/img/public_logo-color.png" alt="logo">
                </div>
                <div class="logo-text">
                    捕获专属你的商机
                </div>

                <el-form :model="form" :rules="rules" autocomplete="off" class="register-form" label-width="80px" ref="registerForm">
                    <el-form-item label="手机号" prop="username" class="user-name">
                        <el-input class="input-username" type="text" placeholder="请输入手机号" v-model="form.username"/>
                    </el-form-item>
                    <el-form-item class="password" label="密码" prop="password">
                        <el-input placeholder="请输入密码" type="password" v-model="form.password"/>
                    </el-form-item>
                    <el-form-item class="confirm-password" label="确认密码" prop="confirmPassword">
                        <el-input placeholder="请再次输入密码" type="password" v-model="form.confirmPassword"/>
                    </el-form-item>
                    <el-form-item label="验证码" prop="messageCode" class="message-code">
                        <el-input type="text" placeholder="请输入短信验证码" v-model="form.messageCode"/>
                        <span class="message-code-rest" v-if="sendMessageCodeStatus"
                                     @click="sendMessageCode('registerForm')">
                            发送验证码
                        </span>
                        <span class="message-code-rest" v-else>
                            {{restSecond+'秒后重新发送'}}
                        </span>
                    </el-form-item>
                    <div class="agree-agreement">
                        <span class="check-box" :class="{active:isAgreeAgreement}" @click="agreeAgreement"></span>
                        <span class="text">已阅读并同意易找标 <nuxt-link to="/licence" target="_blank">《隐私政策》</nuxt-link>|<nuxt-link to="/declare" target="_blank">《用户政策》</nuxt-link></span>
                    </div>
                    <el-form-item>
                        <el-button class="btn-register" type="primary" @click="onSubmit('registerForm')">立即注册
                        </el-button>
                    </el-form-item>
                    <div class="error-sign" v-show="!isAgreeAgreement">请先阅读并同意易找标《用户政策》|《隐私政策》</div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: '',
                    messageCode: '',
                    password: '',
                    confirmPassword: ''
                },

                // 表单验证，需要在 el-form-item 元素中增加 prop 属性
                rules: {
                    username: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                if (this.utils.testPhoneNumber(value)) {
                                    callback();
                                } else {
                                    callback(new Error('请输入正确的手机号码'));
                                }
                            },
                            trigger: 'change'
                        }
                    ],
                    messageCode: [
                        {required: true, message: '短信验证码不可为空', trigger: 'blur'}
                    ],
                    password: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入密码'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ],
                    confirmPassword: [
                        {
                            required: true,
                            validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请再次输入密码'));
                                } else if (value !== this.form.password) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            },
                            trigger: 'blur'
                        }
                    ]
                },

                isAgreeAgreement: true,
                // 对话框显示和隐藏
                dialogVisible: false,
                sendMessageCodeStatus: 1,//0不能发送，1第一次发送，2重新发送
                restSecond: 60
            }
        },
        methods: {
            agreeAgreement() {//是否同意协议
                this.isAgreeAgreement = !this.isAgreeAgreement;
            },
            onSubmit(formName) {
                if(this.isAgreeAgreement){
                    // 为表单绑定验证功能
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if(this.isAgreeAgreement){
                                let loading = this.$loading({
                                    lock: true,
                                    text: 'Loading',
                                    spinner: 'el-icon-loading',
                                    background: 'rgba(0, 0, 0, 0.5)'
                                });
                                this.$request.register({
                                    username: this.form.username,
                                    password: this.form.password,
                                    msgCode: this.form.messageCode
                                }).then((res) => {
                                    console.log(res);
                                    loading.close();
                                    if (res.status == 200) {
                                        this.$router.push({
                                            name: 'index'
                                        })
                                    } else {
                                        this.requestError(res.status, res.message)
                                    }
                                }, (err) => {
                                    console.log(err);
                                    loading.close();
                                    this.requestFail(err);
                                })
                            }

                        } else {
                            return false;
                        }
                    });
                }
            },
            sendMessageCode(formName) {//发送短信验证码
                this.$refs[formName].validateField('username', (msg) => {
                    if (msg) {//未通过验证
                    } else {
                        console.log('通过验证');
                        let loading = this.$loading({
                            lock: true,
                            text: 'Loading',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.5)'
                        });
                        this.$request.sendSmsCode({
                            tel: this.form.username
                        }).then((res) => {
                            console.log(res);
                            loading.close();
                            if (res.status == 200) {
                                let timer = setInterval(() => {
                                    if (this.restSecond <= 1) {
                                        clearInterval(timer);
                                        this.sendMessageCodeStatus = 2;
                                        this.restSecond = 60;
                                    } else {
                                        this.sendMessageCodeStatus = 0;
                                        this.restSecond -= 1
                                    }
                                }, 1000)
                            } else {
                                this.requestError(res.status, res.message)
                            }
                        }, (err) => {
                            console.log(err);
                            loading.close();
                            this.requestFail(err);
                        })
                    }
                })

            }
        }
    }
</script>

<style scoped lang="less">
    .container {
        font-family: "黑体";
        @register-wrap-width: 1200px;
        @register-wrap-height: 660px;

        .height;
        .bg("@{img-base-url}register_bg.png", no-repeat, bottom center);
        .bg-linear-gradient(#f79e2f, @main-color, up);
        .height;
        .min-width(1200px);
        .min-height(@register-wrap-height);
        position: relative;

        .register-wrap {
            .size(@register-wrap-width, @register-wrap-height);
            .center(known-x, @register-wrap-width);
            .center(known-y, @register-wrap-height);
            .bg("@{img-base-url}register_bg-2.png", no-repeat, center, cover);
            background-color: #ffffff;
            .border-radius(16px);

            .register-box {
                .size;
                position: relative;

                .register-text {
                    .fz(35px);
                    .color(@main-color);
                    position: absolute;
                    top: 50px;
                    left: 110px;
                }

                .logo {
                    .size(307px, 76px);
                    position: absolute;
                    top: 183px;
                    left: 110px;

                    img {
                        .size;
                    }
                }

                .logo-text {
                    .fz(59px);
                    .color(#F68118);
                    letter-spacing: 10px;
                    position: absolute;
                    left: 110px;
                    top: 295px;
                }

                .error-sign{
                    .color(@color-error);
                    .center(text-x);
                    .fz(16px,55px);
                    margin-top: -30px;
                }
            }
        }

        @media (min-width: 1520px) {
            @register-wrap-width: 1511px;
            @register-wrap-height: 834px;

            .register-wrap {
                .size(@register-wrap-width, @register-wrap-height);
                .center(known-x, @register-wrap-width);
                .center(known-y, @register-wrap-height);
                padding: 86px 120px;

                .register-box {
                    .register-text {
                        top: 20px;
                    }
                }
            }
        }
    }
</style>
<style lang="less">
    #page-register {
        .register-form {
            .width(468px);
            position: absolute;
            right: 0;
            padding: 0 16px;
            padding-top: 102px;
            font-family: AlibabaPuHuiTiR, "黑体";

            .agree-agreement {
                .fz(16px);
                .color(#7CB1E8);
                margin-bottom: 39px;

                .check-box {
                    display: inline-block;
                    .size(14px, 14px);
                    border: 1px solid #7CB1E8;
                    vertical-align: middle;
                    cursor: pointer;

                    &.active {
                        .bg("@{img-base-url}register_icon-duigou.png");
                    }
                }

                .text {
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 10px;
                }
            }

            .el-form-item {
                &:before {
                    display: none;
                }

                margin-bottom: 38px;

                .content-after(@w,@h,@bg-url) {
                    display: inline-block !important;
                    .size(@w, @h) !important;
                    .bg("@{img-base-url}@{bg-url}.png");
                    position: absolute;
                    top: 50%;
                    margin-top: -10px;
                    .center(known-y, @h);
                    left: 18px;
                }

                &.user-name {
                    .el-form-item__content {
                        &:after {
                            .content-after(20px, 20px, 'login_icon-user');
                        }
                    }
                }

                &.message-code {
                    .el-form-item__content {
                        &:after {
                            .content-after(21px, 16px, 'register_icon-message');
                        }

                        .message-code-rest {
                            position: absolute;
                            right: 30px;
                            .fz(13px);
                            .color(@main-color);
                            .center(known-y, 16px);
                            line-height: 1;
                            cursor: pointer;
                        }
                    }
                }

                &.password {
                    .el-form-item__content {
                        &:after {
                            .content-after(18px, 20px, 'login_icon-password');
                        }
                    }
                }

                &.confirm-password {
                    .el-form-item__content {
                        &:after {
                            .content-after(21px, 20px, 'register_icon-graph-code');
                        }
                    }
                }

                .el-form-item__label {
                    display: none !important;
                }

                .el-form-item__content {
                    .width;
                    margin-left: 0 !important;

                    .el-input {

                        &:before {
                            display: inline-block !important;
                            .size(20px, 20px) !important;
                            background: url("@{img-base-url}login_icon-user.png") no-repeat center;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

                        .el-input__inner {
                            .size(423px, 55px) !important;
                            border: 1px solid #EBEBEB;
                            box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12) !important;
                            .border-radius(8px);
                            padding-left: 52px;
                        }
                    }
                }

                &.is-error {
                    .el-input__inner {
                        border-color: #F56C6C !important;
                    }
                }

                .btn-register {
                    .size(423px, 54px);
                    background: linear-gradient(180deg, rgba(246, 123, 20, 1), rgba(248, 163, 51, 1));
                    box-shadow: 0 1px 7px 0 rgba(246, 131, 26, 0.51);
                    .border-radius(27px);
                    border: none;
                    .fz(14px);
                    font-weight: lighter;
                }
            }
        }
    }
</style>